在完成「永久性登入登出機制」時
要來先講解一下兩項React Hook語法與資料儲存系統

本篇介紹的技術為

• useEffect
• useContext
• AsyncStorage

常說是React語法，但React Native是完全適用這些技術的😝

為何這三項列為進階知識

「沒有這些技術，你的APP還是能動🤨」

這幾項相當於前兩篇(基礎知識)，新手學習時會相對的困難(自己學習Effect也是理解很久)
對於以往Html直接操作元素，React鼓勵元件重用
因此每項元件，都會有自己的狀態、行為、效果

同時 React Hook 語法簡潔，讓開發者再撰寫元件交互時更加方便
也會做詳細介紹後，在進行後續專案實戰

useEffect

useEffect是React Hook其中一項功能
會在渲染畫面之後執行此function
用白話文講的話，就是替畫面「做效果」

useEffect通常用於何處?

• 畫面需要取得後端API資料時
• 監聽State的值改變，需執行其他動作時
• 定時更新資訊...等其他做效果的應用

useEffect如何使用

放上最簡單的做效果範例

import { useState, useEffect } from 'react';
import { Text, SafeAreaView, StyleSheet, Button } from 'react-native';

export default function App() {
  const [count, setcount] = useState(0);
  const [countText, setcountText] = useState('');
  useEffect(() => {
    setcountText(`你點擊了${count}次`);
    return () => {
      //如果你想清除or初始化上一次的狀態，才使用return清除Effect
    };
  }, [count]);
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>點擊次數</Text>
      <Text style={styles.paragraph}>{countText}</Text>
      <Button onPress={() => setcount(count + 1)} title="+1" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

程式當中
只要點選+1按鈕，會將count+1
當count被增加時，執行Effect函數
畫面則顯示你點擊了1次，以此類推

可以不要監聽任何State嗎

只要後方不加上任何監聽常數，就能使用

useEffect(() => {
    console.log('第一次進入或其他State改變就會執行');
});

useEffect無限渲染迴圈陷阱

本段會造成無限迴圈(數字會一直往上加)
在開發時請小心使用

useEffect(() => {
    setcountText(`你點擊了${count}次`);
    setcount(count + 1)
}, [count]);

1. 渲染完成後，useEffect本身會先執行一次
2. 重複setcount(count + 1)，卻沒有停止條件，導致無限渲染

useContext

useContext是React Hook其中一項功能
專門用於父子Component之間的資料傳遞

在前篇Props、State介紹時提到，A元件傳遞參數到B元件時
需使用Props
若B元件還有C元件
則傳遞Props方法為A->B->C
專案若變大之後，Props反而會造成維護困難的點

useContext好處、使用方法

A->B->C元件的Props傳遞概念
能改成A直接傳遞到C
也能從C傳遞Props回到A

文字表述其實很困難，還是來看看範例
MyContext.js

import React, { createContext, useContext } from 'react';

// 新增上下文
const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const sharedValue = "我是共享值"; 

  return (
    <MyContext.Provider value={sharedValue}>
      {children}
    </MyContext.Provider>
  );
};

MyComponent.js

import React, { useContext } from 'react';
import { Text, View } from 'react-native';
import { MyContext } from './MyContext'; //引入

function MyComponent() {
  const sharedValue = useContext(MyContext);

  return (
    <View>
      <Text>共享的值：{sharedValue}</Text>
    </View>
  );
}

export default MyComponent;

在不帶任何Props的情況下，拿到了sharedValue
通常也用於判斷是否登入、權限獲得的重要Hook

AsyncStorage

AsyncStorage是一種全域未加密、資料儲存系統
也就是在任何元件，都能隨時隨地取得資料
通常也用於存取部分登入資訊
不過因為未加密，敏感資訊(密碼、個資相關)不建議儲存至此

※原先React Native官方是有維護此元件
目前已移出，使用同等第三方元件代替
可點選標題進入教學文件

安裝指令npx expo install @react-native-async-storage/async-storage

AsyncStorage用法

講解前先來補充一種Javascript ES7函式 -- 非同步函式(async、await)
簡單描述非同步函式：

• 一般function在JavaScript是由上往下同步執行的
• async function在JavaScript不會等待上一個function完成
• 加上await就能強制等待，等到資料取得後，在向下執行

語法範例：同時呼叫兩支async function

storeData("A");
getData();

非同步是不會等storeData結束的，會直接執行getData
此時還沒儲存就讀取，會造成資料無法取出問題

正式講解(借用官方的範例)

1. 引入

import AsyncStorage from '@react-native-async-storage/async-storage';

2. 設定my-key儲存資料

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem('my-key', jsonValue);
  } catch (e) {
    // saving error
  }
};

3. 取得my-key資料

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('my-key');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    // error reading value
  }
};

※官方規定只能儲存字串
因此物件儲存時，要使用JSON.parse序列化

結語：
學到這裡，已經從中得知前端框架訴求狀態(State)、渲染效果的機制
只要熟悉之後，一定能得心應手
也同時學到了非同步function的基本使用方法
個人目前學習Hooks的進度也只到這邊，專案就開發完成了

下一篇，即將開發「永久性登入登出機制」
帶大家實戰一次，加深對這些Hooks的使用經驗
也使你的APP更加便利，使用者體驗更上一層樓。